<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS 视图配置</title>
		<style>
			body{
			  font-family: 'microsoft yahei',Arial,sans-serif;
			}
			
			h1,h2{
			  font-weight:500;
			  font-size:24px;
			}
			
			p{
			  float:left;
			  margin: 20px;
			}
			
			span{
			  color: #999;  
			}
			
			.clearfix{
			  clear:both;
			}
		</style>
	</head>

	<body>
		<h1>Angular 视图演示</h1>

		<span>点击下面导航，查看不同视图切换效果</span>
		
		<div ng-app="mainApp">
		
		  <!-- 定义两个视图操作 -->
		  <p><a href="#add">添加</a></p>
		  <p><a href="#view">阅读</a></p>
		  <p><a href="#undefine">其它</a></p>
		  
		  <hr class="clearfix">
		  
		  <!-- 定义视图 -->
		  <div ng-view></div>
		  
		  <!-- 定义视图相关模板 -->
		  <script type="text/ng-template" id="add.htm">
		    <h2> +添加操作 </h2>
		      {{message}}
		  </script>
		  
		  <script type="text/ng-template" id="view.htm">
		    <h2> #阅读操作 </h2>	    
		      {{message}}
		  </script>	
		</div>
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular-route.min.js"></script>
		<script>
			var mainApp = angular.module("mainApp", ['ngRoute']);

			//$routeProvider用来设置URL相关配置，映射到对应的HTML页面或者ng-template，并且绑定到指定控制器
			mainApp.config(['$routeProvider',
			                function($routeProvider) {
			                  $routeProvider.
			                    when('/add', {
			                      templateUrl: 'add.htm',
			                      controller: 'AddController'
			                    }).
			                    when('/view', {
			                      templateUrl: 'view.htm',
			                      controller: 'ViewController'
			                    }).
			                    otherwise({
			                      redirectTo: '/add'
			                    });
			                }]);
			
			mainApp.controller('AddController', function($scope) {
			  $scope.message = "这里演示视图的添加操作";
			});
			
			mainApp.controller('ViewController', function($scope) {
			  $scope.message = "这里演示视图的阅读操作";
			});
		</script>
	</body>

</html>